<template>
  <div class="">
    <div class="loading" v-if="loading">loading...</div>
  <location-header :cities="cities"></location-header>
  <location-list :letter="letter" :cities="cities" :hotlist="hotlist"></location-list>
  <location-alphabet @change="handleLetterChange" :alphabetlist="alphabetlist"></location-alphabet>
  </div>
</template>

<script>
//	引入组件
  import locationHeader from './components/locationHeader' 
  import locationList from './components/locationList'
  import locationAlphabet from './components/locationAlphabet'
  import axios from 'axios'
//	定义输出组件name
export default {
  name: 'Location',
//注册组件
data(){
	return{
    letter:'',
    cities:{},
    hotlist:[],
    alphabetlist:[],
    loading:true
	}
},

// 页面加载执行
 mounted(){
    this.getLoationData()
    
    
 },
methods:{
 getLoationData(){
		axios.get("/api/city.json")
         .then(this.getHomeDataSucc)
        
  },
  
  getHomeDataSucc(res){
	        // console.log(res)
	     res = res.data
	     if(res.data){
        this. loading=false
        const data = res.data
          this.cities = data.cities
          this.hotlist = data.hotCities
          this.alphabetlist = data.alphabetList
       }
	
   },
   handleLetterChange(letter){
     this.letter =letter
   }
},
 
components:{
  locationHeader ,
  locationList,
  locationAlphabet
  
}
}

</script>


<style scoped>

.loading{
position: absolute;
top: 350px;
left: 175px;
z-index: 100;
opacity: 0.3;
background-color: #000;
color: #fff;
text-align: center;
}

</style>